import React from 'react';
import {Link, Route} from 'dva/router';
import DocumentTitle from 'react-document-title';
import CFooter from './CFooter';
import {name, desc, logo, logoDark, userLayoutLinks} from '../../config/config';
import {getPageTitle} from '../../utils/utils';
import styles from './UserLayout.less';

export default class UserLayout extends React.PureComponent {

  constructor(props) {
    super(props);

    this.state = {
      userNavList: props.userNavList,
    };
  }

  render() {
    const {userNavList} = this.state;
    const pathname = this.props.location.pathname;

    return (
      <DocumentTitle title={getPageTitle(name, userNavList, pathname)}>
        <div className={styles.container}>
          <div className={styles.top}>
            <div className={styles.header}>
              <Link to="/">
                <img alt="" className={styles.logo} src={logo}/>
                <span className={styles.title}>{name}</span>
              </Link>
            </div>
            <div className={styles.desc}>{desc}</div>
          </div>
          {userNavList.map(item => (
            <Route
              exact={item.exact}
              key={item.path}
              path={item.path}
              component={item.component}
            />
          ))}
          <CFooter className={styles.footer} links={userLayoutLinks}/>
        </div>
      </DocumentTitle>
    );
  }
}
